<template>
  <div class="question-statistics-author">
    <mu-flex justify-content="center" align-items="end" wrap="wrap">
      <mu-paper :z-depth="1" class="date-picker">
        <mu-date-picker :date.sync="date.begin"></mu-date-picker>
        <p class="date-title">开始时间</p>
      </mu-paper>
      <mu-paper :z-depth="1" class="date-picker">
        <mu-date-picker :date.sync="date.end"></mu-date-picker>
        <p class="date-title">结束时间</p>
      </mu-paper>
    </mu-flex>
    <mu-data-table
      stripe
      :columns="columns"
      :data="list"
      no-data-text="暂无数据"
      :min-col-width="40"
      :loading="loading"
    >
      <template #default="{ row }">
        <td class="is-center">{{ row.id }}</td>
        <td class="is-center">{{ row.realname }}</td>
        <td class="is-center">{{ row.total }}</td>
        <td class="is-center">{{ row.pass }}</td>
        <td class="is-center">{{ row.fail }}</td>
      </template>
    </mu-data-table>
  </div>
</template>

<script>
import api from '@/api'
import { parseTime } from '@/util'
import { mapGetters } from 'vuex'

export default {
  name: 'QuestionStatisticsAuthor',
  data() {
    return {
      loading: false,
      list: [],
      date: {
        begin: new Date(),
        end: new Date()
      }
    }
  },
  computed: {
    ...mapGetters({
      isPhone: 'isPhone'
    }),
    columns() {
      const marphWidth = this.isPhone ? 100 : undefined
      return [
        { title: 'ID', width: 60, name: 'id', align: 'center' },
        { title: '姓名', width: 100, name: 'realname', align: 'center' },
        { title: '出题总数', width: marphWidth, name: 'total', align: 'center' },
        { title: '通过题数', width: marphWidth, name: 'pass', align: 'center' },
        { title: '不通过题数', width: marphWidth, name: 'fail', align: 'center' }
      ]
    }
  },
  watch: {
    'date.begin'() {
      this.getStatistics()
    },
    'date.end'() {
      this.getStatistics()
    }
  },
  methods: {
    async getStatistics() {
      this.loading = true
      try {
        const begin = this.toDatetimeString(this.date.begin)
        const end = this.toDatetimeString(this.date.end)
        this.list = await api.getQuestionStatisticsByAuthor(begin, end)
      } catch (err) {
        this.$apiCatch(err)
      }
      this.loading = false
    },
    toDatetimeString(time) {
      return parseTime(time, '{y}-{m}-{d}')
    }
  }
}
</script>

<style scoped>
.question-statistics-author {
  padding: 12px;
}
.date-picker {
  margin: 0 6px;
}
.date-title {
  padding: 6px;
  text-align: center;
}
</style>
